<script setup lang="ts">
useHead({
  title: "课程表",
});

let source: HTMLElement;
const handleDragStart = (e: DragEvent) => {
  console.log(e);
  const target: HTMLElement = e.target as HTMLElement;
  if (target.dataset.effect === "move" && e.dataTransfer) {
    e.dataTransfer.effectAllowed = "move";
  }
  source = target;
  target.style.opacity = "0.2";
};

const handleDragOver = (e: DragEvent) => {
  e.preventDefault();
};

const handleDragEnter = (e: DragEvent) => {
  console.dir(e.target);
  const dropNode = getDropNode(e.target as HTMLElement);
  if (dropNode && dropNode.dataset.drop === source.dataset.effect) {
    dropNode.classList.add("hover-backgroud");
  }
};

const handleDrop = (e: DragEvent) => {
  const dropNode = getDropNode(e.target as HTMLElement);
  if (dropNode && dropNode.dataset.drop === source.dataset.effect) {
    if (dropNode.dataset.drop === "copy") {
      dropNode.innerHTML = "";
      const cloned = source.cloneNode(true) as HTMLElement;
      cloned.dataset.effect = "move";
      cloned.style.opacity = "1";
      dropNode.appendChild(cloned);
    } else {
      source.remove();
    }
  }
};

const handleDragEnd = (e: DragEvent) => {
  (e.target as HTMLElement).style.opacity = "1";
};

function getDropNode(node: HTMLElement) {
  // console.log(node);
  clearHoverClass();
  while (node) {
    if (node.dataset && node.dataset.drop) {
      return node;
    }
    node = node.parentNode as HTMLElement;
  }
  return node;
}
function clearHoverClass() {
  document.querySelectorAll(".hover-backgroud").forEach((ele) => {
    ele.classList.remove("hover-backgroud");
  });
}
</script>

<template>
  <div
    class="content"
    @dragover="handleDragOver"
    @dragstart="handleDragStart"
    @dragenter="handleDragEnter"
    @drop="handleDrop"
    @dragend="handleDragEnd"
  >
    <div class="left" data-drop="move">
      <div
        draggable="true"
        data-effect="copy"
        style="background-color: rgb(26, 231, 156)"
      >
        语文
      </div>
      <div
        draggable="true"
        data-effect="copy"
        style="background-color: rgb(107, 219, 15)"
      >
        数学
      </div>
      <div
        draggable="true"
        data-effect="copy"
        style="background-color: rgb(208, 133, 13)"
      >
        英语
      </div>
      <div
        draggable="true"
        data-effect="copy"
        style="background-color: rgb(30, 98, 246)"
      >
        物理
      </div>
      <div
        draggable="true"
        data-effect="copy"
        style="background-color: rgb(210, 40, 113)"
      >
        化学
      </div>
      <div
        draggable="true"
        data-effect="copy"
        style="background-color: rgb(210, 224, 26)"
      >
        生物
      </div>
    </div>
    <div class="right">
      <table>
        <thead>
          <tr>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="num in 4" :key="num">
            <td v-for="col in 5" :key="col" data-drop="copy"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  display: flex;
  .left {
    width: 80px;
    text-align: center;
    margin-right: 20px;
    div {
      margin: 4px;
      line-height: 2em;
      background-color: aquamarine;
    }
  }
  td {
    border: 1px solid #999;
    height: 2em;
    width: 90px;
    text-align: center;
    div {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }
  }
  .hover-backgroud {
    background-color: #999;
  }
}
</style>
